<template>
  <div class="mechanism-wrap">
    <div class="search-box">
      <div class="search-con" @click="queryType('')">
        <span class="title" :class="{'active':type == ''}">查看全部</span>
      </div>
      <div class="search-con" @click="queryType(3)">
        <span class="title" :class="{'active':type == 3}">只看有图</span>
      </div>
      <div class="search-con" @click="queryType(1)">
        <span class="title" :class="{'active':type == 1}">只看评论</span>
      </div>
      <div class="search-con" @click="queryType(2)">
        <span class="title" :class="{'active':type == 2}">只看工资</span>
      </div>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="mechanism-van"
    >
      <div class="mechanism-box">
        <div class="mechanism-con" v-for="(item,index) in mechanismList" :key="index">
          <div class="rate-box" v-if="item.type == 1">
            <div class="rate-con1">
              <div class="avatar"><img :src="item.userUrl?item.userUrl:require('./avatar.png')" class="logo"
                                       onclick="return false"/></div>
              <span class="nickname">{{item.userName}}</span>
              <div class="score-box">
                <img src="./score.png" class="score" onclick="return false"/>
                <span>{{item.perScore}}分</span>
              </div>
            </div>
            <div class="rate-con2">
              <div class="num1">工作环境：<span>{{parseInt(item.workEnvironScore)+'.0'}}</span></div>
              <div class="num1">住宿环境：<span>{{parseInt(item.sleepEnvironScore)+'.0'}}</span></div>
              <div class="num1">餐饮环境：<span>{{parseInt(item.foodEnvironScore)+'.0'}}</span></div>
              <div class="num1">企业管理：<span>{{parseInt(item.manageEnvironScore)+'.0'}}</span></div>
              <div class="num1">薪资福利：<span>{{parseInt(item.moneyEnvironScore)+'.0'}}</span></div>
            </div>
            <div class="rate-con4">
              <div class="content">

                <div :class="{'con-all':item.showAll,'con':!item.showAll}">{{item.commentContent}}
                  <span class="pack" v-if="item.showAll && item.commentContent.length>55"
                        @click="packUp(index)">收起</span>
                </div>
                <div class="all" v-if="!item.showAll" @click="lookUp(index)">查看全文</div>
              </div>
            </div>
            <div class="rate-con3">
              <div v-if="item.commentUrl">
                <img :src="picture?picture:require('./bg5.png')" class="picture"
                     v-for="(picture,index) in item.commentUrl.split(';')" v-if="index < 6" :key="index"
                     @click="showPic(picture)" onclick="return false"/>
              </div>
            </div>
          </div>

          <div class="salary-box" v-if="item.type == 2">
            <div class="avatar">
              <img :src="item.userUrl?item.userUrl:require('./avatar.png')" class="logo" onclick="return false"/>
              <div class="nickname">{{item.userName}}</div>
            </div>
            <div class="salary-con">
              <table class="salary-table">
                <tr>
                  <td>岗位名称</td>
                  <td>{{item.commentContent}}</td>
                </tr>
                <tr>
                  <td>月份</td>
                  <td>{{item.workEnvironScore}}</td>
                </tr>
                <tr>
                  <td>应发工资</td>
                  <td>{{item.foodEnvironScore}}元</td>
                </tr>
                <tr>
                  <td>实发工资</td>
                  <td>{{item.moneyEnvironScore}}元</td>
                </tr>
              </table>

              <div class="picture" @click="showPic(item.commentUrl)">
                <img :src="item.commentUrl?item.commentUrl:require('./pic_no.png')" class="logo"
                     onclick="return false"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>

    <div class="btn-box" v-if="showBtn">
      <div class="rate" @click="bask">晒个工资</div>
      <div class="bask" @click="rate">我来点评</div>
    </div>

    <div class="empty-wrap" v-if="mechanismList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">没有点评数据~</div>
      </div>
    </div>

    <back-page @backPage="back"></back-page>

  </div>
</template>

<script>
  import {getSessionStore} from "../../common/js/util"
  import {baseUrl} from "../../common/js/env"
  import {ImagePreview} from 'vant'
  import backPage from "../../components/backpage"

  export default {
    data() {
      return {
        id: "",
        name: "",
        type: "",
        userSign: "",
        currentPage: 1,
        PageSize: 20,
        mechanismList: [],
        loading: false,
        finished: false,
        showBtn: false
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(getSessionStore("user_sign"));
      this.id = this.$route.query.id;
      this.name = this.$route.query.name;
      this.queryOnceMechanism();
    },
    methods: {
      showPic(pic) {//预览
        ImagePreview([pic]);
      },
      onLoad() {
        setTimeout(() => {//异步更新数据
          this.queryMechanismList();
        }, 300);
      },
      queryMechanismList() {//查询企业点评详情
        this.axios.get(baseUrl + "/mechanismcomment/query_deatil?sgin=" + this.userSign + "&mechanismId=" + this.id + "&selectType=" + this.type + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.mechanismList = this.mechanismList.concat(resultObj.data);

              this.mechanismList.forEach((val) => {
                this.$set(val, "showAll", true);
                if (val.commentContent.length > 55) {//内容的字数超过55不显示全部文字
                  this.$set(val, "showAll", false);
                }
              });
              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {//数据全部加载完成
              this.loading = false;
              if (this.mechanismList.length >= resultObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryType(index) {//筛选
        this.type = index;
        this.currentPage = 1;
        this.PageSize = 20;
        this.mechanismList = [];
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.queryMechanismList();
        }
      },
      lookUp(index) {//查看全文
        for (let i = 0, length = this.mechanismList.length; i < length; i++) {
          if (index == i) {
            this.mechanismList[i].showAll = true;
            break;
          }
        }
      },
      packUp(index) {//收起
        for (let i = 0, length = this.mechanismList.length; i < length; i++) {
          if (index == i) {
            this.mechanismList[i].showAll = false;
            break;
          }
        }
      },
      queryOnceMechanism() {//查询用户就过职、曾经就职的企业
        this.axios.get(baseUrl + "/mechanismcomment/check_ismechanism?sgin=" + this.userSign + "&mechanismName=" + this.name + "&mechanismId=" + this.id).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            this.showBtn = true;
          } else {
            this.showBtn = false;
          }
        });
      },
      rate() {//我来点评
        this.$router.push({path: "/remark", query: {"id": this.id, "name": this.name}});
      },
      bask() {//晒工资单
        this.$router.push({path: "/payroll", query: {"id": this.id, "name": this.name}});
      },
      back() {//返回
        this.$router.push({path: "/company", query: {"city": "全国"}});
      }
    },
    components: {
      ImagePreview,
      backPage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .mechanism-wrap
    wh(100%, 100%)
    .search-box
      display: flex
      align-items: center
      position: fixed
      top: 0
      z-index: 1
      wh(100%, 1.2rem)
      background: #FFF
      .search-con
        flex: 1
        display: flex
        justify-content: center
        .title
          fj(center, center)
          wh(2.213rem, 0.8rem)
          background: rgba(242, 241, 240, 1)
          border-radius: 0.08rem
          size-color(0.373rem, rgba(102, 102, 102, 1))
        .active
          color: rgba(60, 175, 255, 1)
          background: rgba(228, 244, 255, 1)
    .mechanism-van
      position: absolute
      top: 1.2rem
      padding-bottom: 1.32rem
      wh(100%, auto)
      .mechanism-box
        wh(100%, auto)
        .mechanism-con
          border-bottom: 0.027rem solid #f2f2f2
          .rate-box
            wh(100%, auto)
            overflow: hidden
            .rate-con1
              display: flex
              align-items: center
              margin: 0 auto
              wh(93.6%, 0.853rem)
              padding-top: 0.427rem
              padding-bottom: 0.16rem
              .avatar
                margin-right: 0.32rem
                wh(0.853rem, 0.853rem)
                .logo
                  wh(100%, 100%)
                  border-radius (50%)
              .nickname
                size-color(0.453rem, rgba(51, 51, 51, 1))
                font-weight: 500
              .score-box
                display: flex
                align-items: center
                margin-left: auto
                size-color(0.373rem, rgba(250, 191, 72, 1))
                font-weight: 500
                .score
                  wh(0.427rem, 0.427rem)
                  margin-right: 0.133rem
            .rate-con2
              display: flex
              flex-wrap: wrap
              size-color(0.32rem, rgba(161, 171, 179, 1));
              padding-bottom: 0.373rem
              margin-left: 1.493rem
              margin-right: 0.32rem
              .num1
                width: 33.333%
                padding-bottom: 0.2rem
            .rate-con3
              display: flex
              margin-left: 1.493rem
              margin-right: 0.32rem
              padding-bottom: 0.427rem
              .picture
                margin-bottom: 0.1rem
                wh(2.613rem, 2.613rem)
                border-radius(0.16rem)
                &:nth-child(2)
                  margin-left: 0.16rem
                  margin-right: 0.16rem
                &:nth-child(5)
                  margin-left: 0.16rem
                  margin-right: 0.16rem
            .rate-con4
              margin-left: 1.493rem
              margin-right 0.467rem
              padding-bottom: 0.36rem
              .con
                margin-bottom: 0.15rem
                line-height: 0.48rem
                size-color(0.373rem, rgba(51, 51, 51, 1))
                overflow: hidden
                word-break: break-all
                display: -webkit-box
                /* autoprefixer: off */
                -webkit-box-orient: vertical
                /* autoprefixer: on */
                -webkit-line-clamp: 3
                text-overflow: ellipsis
              .con-all
                margin-bottom: 0.15rem
                line-height: 0.48rem
                size-color(0.373rem, rgba(51, 51, 51, 1))
                word-break: break-all
                .pack
                  size-color(0.36rem, rgba(60, 175, 255, 1))
                  line-height: 0.36rem
              .all
                size-color(0.36rem, rgba(60, 175, 255, 1))
                line-height: 0.36rem
            .distance
              background: #FFF
          .salary-box
            wh(100%, auto)
            border-bottom: 0.027rem solid #f2f2f2
            .avatar
              margin: 0 auto
              display: flex
              align-items: center
              padding-top: 0.427rem
              padding-bottom: 0.427rem
              wh(93.6%, 0.853rem)
              .logo
                border-radius(50%)
                wh(0.853rem, 100%)
              .nickname
                margin-left: 0.347rem
                size-color(0.453rem, rgba(51, 51, 51, 1))
                font-weight: 500
            .salary-con
              display: flex
              margin-left: 1.493rem
              margin-right: 0.32rem
              padding-bottom: 0.427rem
              .salary-table
                wh(5.387rem, 3.2rem)
                tr
                  size-color(0.347rem, rgba(153, 153, 153, 1))
                  height: 0.8rem
                  &:nth-child(2n-1)
                    background: rgba(245, 248, 250, 1)
                  td
                    height: 0.8rem
                    vertical-align: middle
                    text-align: center
                    border: 0.027rem solid rgba(224, 224, 224, 1)
              .picture
                margin-left: auto
                wh(2.613rem, 2.613rem)
                .logo
                  wh(100%, 100%)
                  border-radius: 0.16rem
            .distance
              background: #FFF
    .btn-box
      position: fixed
      bottom: 0
      display: flex
      align-items: center
      wh(100%, 1.32rem)
      size-color(0.44rem, rgba(255, 255, 255, 1))
      z-index: 99
      .rate
        height: 1.32rem
        fj(center, center)
        flex: 1
        background: rgba(255, 194, 75, 1)
      .bask
        height: 1.32rem
        fj(center, center)
        flex: 1
        background: rgba(60, 175, 255, 1)
    .empty-wrap
      fj(center, center)
      position: fixed
      top: 1.2rem
      left: 0
      right: 0
      bottom: 0
      wh(100%, auto)
      .empty-box
        wh(4.773rem, auto)
        .img-box
          wh(100%, 4.773rem)
          .empty
            wh(100%, 100%)
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          size-color(0.427rem, rgba(153, 153, 153, 1))
</style>
